<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>
            PANTS
        </title>

        <link rel="stylesheet" type="text/css" href="style.css" />

        <script type="text/javascript" src="jquery-1.5.js"></script>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="jscript.js"></script>

    </head>

    <body onload="createDiv()">
        <!-- <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script> -->
        <div id="fb-root"></div>
        <div id="content">
            <div id="top">
                <div id="dPantsLogo">
                    <img src="img/pants.png" id="pantsLogo" alt="Logo" />

                </div>
                <div id="topBtn">
                    <input type="button" id="homeBtn" class="gameButton" value="Home"/>
                    <input type="button" id="createGameBtn" class="gameButton" value="Create Game" />
                    <input type="button" id="joinGameBtn" class="gameButton" value="Join Game" />
                    <input type="button" id="inviteFriendsBtn" class="gameButton" value="Invite Friends" />

                </div>
            </div>
            <div class="buffer"></div>
            <div id="separator">
                <hr />
            </div>


            <div id="home">
                <div id="dGames">

                    <label id="lCurGames">Current Games</label>
                    <br />
                    <div id="dCurGames" class="scroll">
                        <table id="tCurGames">
                            <tr>
                                <td>ABC</td>
                            </tr>
                            <tr>
                                <td>ABC</td>
                            </tr>
                            <tr>
                                <td>ABC</td>
                            </tr>
                            <tr>
                                <td>ABC</td>
                            </tr>
                            <tr>
                                <td>ABCvvgfd</td>
                            </tr>
                            <tr>
                                <td>ABC</td>
                            </tr>
                            <tr>
                                <td></td>
                            </tr>

                        </table>
                    </div>
                </div>

                <div id="dStats">
                    <label id="lStats">Your Stats</label>
                    <br />
                    <div id="dUserStats">
                        <table id="tStats">

                            <tr>
                                <td class="statLabel">Score</td>
                                <td id="score" class="statScore">1</td>
                            </tr>
                            <tr>
                                <td class="statLabel">Games Played</td>
                                <td id="gamesPlayed" class="statScore">1</td>
                            </tr>
                            <tr>
                                <td class="statLabel">Games Won</td>
                                <td id="gamesWon" class="statScore">1</td>
                            </tr>
                            <tr>
                                <td class="statLabel">Highest Game Score</td>
                                <td id="highestGameScore" class="statScore">1</td>
                            </tr>
                            <tr>
                                <td class="statLabel">Classified Words</td>
                                <td id="classifiedWords" class="statScore">1</td>
                            </tr>
                            <tr>
                                <td class="statLabel">Rank</td>
                                <td id="rank" class="statScore">1</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div id="buffer"></div>
            </div>
            <div id="createGame">
                <label id="createGameLabel">Create Game</label>
                <form>
                    <table id="tCreateGame">
                        <tr>
                            <td class="createGameHeader">Room Name:</td>
                            <td class="createGameData"><input type="text" /></td>
                        </tr>
                        <tr>
                            <td class="createGameHeader">Max Players:</td>
                            <td class="createGameData">
                                <select>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                    <option>6</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td class="createGameHeader">Type:</td>
                            <td class="createGameData">
                                <select>
                                    <option>Open</option>
                                    <option>Closed</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td class="createGameHeader">Duration (Days):</td>
                            <td class="createGameData">
                                <select>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                    <option>6</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td class="createGameHeader">Word Starts With:</td>
                            <td class="createGameData"></td>
                        </tr>
                        <tr>
                            <td class="createGameHeader">Word Ends With:</td>
                            <td class="createGameData"></td>
                        </tr>
                    </table>
                </form>
                <input type="button" id="createRoom" class="gameButton" value="Create Room"/>
            </div>
            <div id="dJoinGame">

                <div id="container">

                    <div>
                        <div class="label">
                            <b>Game</b>
                        </div>

                        <div class="label">
                            <b>Game Masters</b>
                        </div>

                        <div class="label">
                            <b>Status</b>
                        </div>

                        <div id="buffer">
                            <br />
                            <br />
                        </div>

                    </div>


                    <div id = "dSpace" class = "scroll">

                        <div id = "row1" class="label">
                        </div>

                        <div id = "row2" class="label">
                        </div>

                        <div id = "row3" class="label">
                        </div>

                        <div id="buffer">
                        </div>

                    </div>

                    <br />
                    <input type="button" id="joinRoom" class="gameButton" value="Join Room"/>
                    <input type="button" id="refreshList" class="gameButton" value="Refresh List"/>


                    <div class="buffer"></div>
                </div>

            </div>



            <div id="bottom">
                <div id="dLeaderBoard">
                    <table id="leaderBoard">
                        <tr id="highscores">
                            <td style="display:none"></td>
                        </tr>
                    </table>
                </div>
            </div>

        </div>
        <script type="text/javascript" src="fb.js"></script>

        <div id = "callFxn">
        </div>
    </body>

</html>